<template>
    <div class="bodyStart">
        <el-container class="body1">
            <el-header>
                <start-header />
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <div class="bb">题目分类</div>
                    <hr />
                    <div class="fonts">数组 <span class="greybubble">123</span></div>
                    <div class="fonts">排序 <span class="greybubble">254</span></div>
                    <div class="fonts">队列 <span class="greybubble">140</span></div>
                    <div class="fonts">枚举 <span class="greybubble">82</span></div>
                    <div class="fonts">查找 <span class="greybubble">267</span></div>
                    <div class="fonts">哈希表 <span class="greybubble">130</span></div>
                    <div class="fonts">二叉树 <span class="greybubble">114</span></div>
                    <div class="fonts">动态规划 <span class="greybubble">287</span></div>
                    <div class="fonts">概率与统计 <span class="greybubble">49</span></div>      
                </el-aside>
                <el-main>
                    <div class="container">
                        <div class="leftpart">
                                <!-- <div class="block" type="flex" justify="center"> -->
                                <!-- <el-carousel height="700px" class="carouselsize">  -->
                                <el-carousel height="500px" width="675px" class="carouselsize"> 
                                    <el-carousel-item v-for="item in imgList" :key="item"> 
                                        <img img :src="item" class="images">
                                        <!-- <img :src="item" fit="fill" style="width:100%;height: 30%;"> -->
                                    </el-carousel-item> 
                                </el-carousel> 
                        </div>
                        <div class="rightpart">
                            <div class="r1">
                                <div class="PersonInfo">
                                    <div>
                                        <img v-image-preview :src="avatar" style="margin-top:10px" class="PersonTop"/>
                                    </div>
                                    <div class="PersonText">
                                        <div><el-button v-if="logFlag==0" round style="margin-bottom:20px" @click="register">注册</el-button>
                                        <div v-else>用户名，你好！</div></div>
                                        <el-button v-if="logFlag==0" round style="margin-bottom:20px" @click="login">登录</el-button>
                                        <el-button v-else round style="margin-bottom:20px" @click="myspace">个人中心</el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="r2" style="padding-top:20px">
                                <div class="PersonInfo">
                                    <div>
                                        题目精选
                                    </div>
                                    <div class="test">
                                        <div onclick="window.open('https://leetcode.cn/problem-list/qgq7m9e/')"><span class="fa fa-fire" style="color:red"></span> LeetCode精选算法题</div>
                                        <div><span class="fa fa-fire" style="color:red"></span> 经典入门算法题</div>
                                        <div><span class="fa fa-fire" style="color:red"></span> 程序员面试必做题</div>
                                        <div><span class="fa fa-fire" style="color:red"></span> 子程推荐算法题</div>
                                        <div><span class="fa fa-fire" style="color:red"></span> BAT精选练习100题</div>
                                        <div><span class="fa fa-fire" style="color:red"></span> LeetCode精选算法题</div>
                                        <!-- <div><span class="fa fa-fire" style="color:red" @click="showID()"></span> {{showId}}</div> -->
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </el-main> 
            </el-container> 
            <el-footer>
                <start-footer />
            </el-footer>        
        </el-container>
    </div>
</template>
<script>
import StartHeader from '../../components/StartCommon/StartHeader.vue'
import StartFooter from '../../components/StartCommon/StartFooter.vue'
import Cookies from 'js-cookie'
import axios from 'axios';
export default {
    components: { StartHeader, StartFooter },
    data() {
        return {

            id: "",
            logFlag: 1,
            activeIndex: '1',
            activeIndex2: '1',
            username: '',
            imgList: [
                require("../../common/images/01.jpg"),
                require("../../common/images/02.jpg"),
                require("../../common/images/03.jpg"),
                require("../../common/images/04.jpg"),
            ],
            avatar: require("../../common/images/05.jpg"),


        };
    },
    mounted() {
        axios({
            method: 'post',
            url: '/getUserById',
            dataType: 'json',
            data: { id: this.showId },
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            }
        }).then(res => {
            console.log(res)
            this.logFlag = res.data.is_exist
            this.flag = res.data.permission
            this.username = res.data.user_name
        })
    },
    computed: {
        showId() {
            return Cookies.get('id')
        },
        mounted() {
            axios({
                method: 'post',
                url: '/getUserById',
                dataType: 'json',
                data: { id: 123 },
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                }
            }).then(res => {
                console.log(res)
            })
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            login() {
                this.$router.push('/Login')
            },
            register() {
                this.$router.push('/Register')
            },
            myspace() {
                this.$router.push('/Myspace')
            },
        }
    }
}
</script>
<style scoped>
.bodyStart{
    display:flex;
}
    html,#app,body,.el-container{
        height: 100%;
    }
    .el-header{ 
        background-color: #DCE4F1;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        line-height: 100px;
    }
    .el-footer { 
        background-color: #E9EEF3;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        height: 185px !important; 
    }    
    .el-aside { 
        background-color: #E8F0F8; 
        color: #333; 
        text-align: center; 
        line-height: 50px; 
    }
    .el-main { 
        background-color: #E9EEF3; 
        color: #333; 
        text-align: center; 
        line-height: 50px; 
    }
    body > .el-container {
        margin-bottom: 40px; 
        
    }
    .el-container:nth-child(5) .el-aside, 
    .el-container:nth-child(6) .el-aside { 
        line-height: 260px; 
    }
    .el-container:nth-child(7) .el-aside { 
        line-height: 320px; 
    }
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-carousel__item h3 { 
        color: #475669; 
        font-size: 14px; 
        opacity: 0.75; 
        line-height: 150px; 
        margin: 0; 
    }
    .el-carousel__item:nth-child(2n) { 
        background-color: #99a9bf; 
    }
    .el-carousel__item:nth-child(2n+1) { 
        background-color: #d3dce6; 
    }
    .carouselsize{
        /* width:1180px; */
        width:100%;
        height: 675px;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #3A517D;
    }
    .container{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
    }
    .leftpart{
        flex: 1 1 60%;
        /* flex:0 0 1180px; */
    }
    .rightpart{
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .rightpart>r1{
        flex: 1;
    }
    .rightpart>r2{
        flex: 1;
    }
    .fonts{
        font-size: 18px;
        color:midnightblue;
    }
    .greybubble
    {
        font-size:13px;
        color:#85858A;
        background-color: #E2E2E3;
        border-radius: 20px;
        justify-content:center;
        padding-right: 3px;
        padding-left: 3px;
    }
    .bb{
        margin-top: 10px;
        font-weight: bold;
        color:midnightblue;
    }
    .PersonInfo{
        width:295px;
        margin-left: 15px;
        background-color: white;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #3A517D;
    }
    .PersonTop{
        padding-top: 20px;
        height: 200px;
        width: 200px;
        border-radius:50%;
    }
    .test{
        font-size: 15px;
        line-height:40px;
        text-align: left;
        margin-left: 20px;
    }
    .images{
        width:100%;
        height:100%;
    }

</style>